<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格table</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
        table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }
        table tr:nth-child(odd) {
            background-color: #f1f1f1;
        }
        table tr:nth-child(even) {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <div ng-app="">
        <p ng-init="name1=['a','b','c','d']">
            <table>
                <tr ng-repeat="x1 in name1">
                    <td>{{x1}}</td>
                </tr>
            </table>
        </p>
        <p ng-init="name2=[{'name':'da','age':'b'},{'name':'ea','age':'b'},{'name':'aa','age':'b'}]">
            <table>
                <tr ng-repeat="x1 in name2">
                    <td>{{x1.name}}</td>
                    <td>{{x1.age}}</td>
                </tr>
            </table>
        </p>
        <h2>uppercase</h2>
        <p ng-init="name3=[{'name':'da','age':'b'},{'name':'ea','age':'b'},{'name':'aa','age':'b'}]">
            <table>
                <tr ng-repeat="x1 in name3 | orderBy : 'name'">
                    <td>{{x1.name}}</td>
                    <td>{{x1.age|uppercase }}</td>
                </tr>
            </table>
        </p>
        <h2>$index</h2>
        <p ng-init="name4=[{'name':'da','age':'b'},{'name':'ea','age':'b'},{'name':'aa','age':'b'}]">
            <table>
                <tr ng-repeat="x1 in name4 | orderBy : 'name'">
                    <td>{{ $index + 1 }}</td>
                    <td>{{x1.name}}</td>
                    <td>{{x1.age|uppercase }}</td>
                </tr>
            </table>
        </p>
        <h2>$odd$even</h2>
        <p ng-init="name4=[{'name':'da','age':'b'},{'name':'ea','age':'b'},{'name':'aa','age':'b'}]">
        <table>
            <tr ng-repeat="x in name4">
                <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.name }}</td>
                <td ng-if="$even">{{ x.age }}</td>
            </tr>
        </table>
        </p>
    </div>
</body>
</html>